<template>
  <div class="index">
      <div class="wrap">
          <div class="crumbs flex">
            <router-link to="/" class="p">首页</router-link>
            <router-link class="p" :to="parent.path" v-if="parent.meta">>{{ parent.meta.title }}</router-link>
            <div class="p">>{{title}}</div>
          </div>
          <div class="service-title">
              <h2>服务联盟</h2>
              <p>Service Alliance</p>
          </div>
          <div class="nav flex-jus">
            <li @click="togNav('/service')">服务商超</li>
            <li @click="togNav('/service/product')">人才服务</li>
            <li class="on" @click="togNav('/service/enterprise')">企业大学</li>
            <li @click="togNav('/service/activity')">活动</li>
          </div>
          <div class="enterprise-list flex flex-wrap">
            <div class="enterprise-li" @click="togNav('/service/enterdetails?id='+item.id)" v-for="(item,i) in list" :key="i">
              <div class="img flex-jusa" :style="{background: 'url('+item.imgUrl+') center no-repeat',backgroundSize:'cover'}">
                <!-- <p>创业服务</p> -->
              </div>
              <div class="enterprise-li-title">{{item.title}}</div>
              <div class="num">{{item.viewed?item.viewed:'0'}}人浏览</div>
            </div>
            
          </div>
          <el-pagination
          background
          prev-text="上一页"
          next-text="下一页"
          layout="prev, pager, next"
          @current-change="curPage"
          :page-size="req.limit"
          :total="total"
        >
        </el-pagination>
      </div>
      <serviceBox></serviceBox>
      <serviceLogo></serviceLogo>
  </div>
</template>
<script>
import serviceBox from '@/views/components/service/service-box'
import serviceLogo from '@/views/components/service/service-logo'
import {findAllLista} from '@/api/service/service'
export default {
  name: "index",
  data() {
    return {
        parent:{},                      //获取父路由信息
        title:"",
        img:require("../../assets/image/profile.jpg"),
        req: {
            limit: 8,
            page: 1,
            bigCategory:10,
        },
        list:[],                            //数据列表
        total:0,
        route:{}
    }
  },
  components:{serviceBox,serviceLogo},
  created(){
    
  },
  mounted(){
      this.route = this.$route;
      this.parent = this.$route.matched[0];
      this.title = this.$route.meta.title;
      this.findAllListapi()
  },
  methods:{
    togNav(e){
      this.$router.push(e)
    },
    curPage(e){
      this.req.page = e;
      this.findAllListapi()
    },
    findAllListapi(){
      this.loading = true;
      findAllLista(this.req).then(res=>{
        this.loading = false;
        if(res.code === 0){
          this.total = res.total;
          this.list = res.data;
        }
      })
    },
  }
}
</script>
<style scoped>
.index{
  background: #fff;
}
.crumbs{
    padding: 10px 0;
}
.crumbs .p{
    font-size: 14px;
}
.service-title{
  padding: 36px 0;
  text-align: center;
  color: #5E9F8E;
}
.service-title h2{
  font-size: 36px;
  line-height: 52px;
}
.service-title p{
  font-size: 14px;
  line-height: 24px;
  text-transform:uppercase;
}
.nav {
  padding: 25px 0;
}
.nav li{
  font-size: 16px;
  color: #343434;
  line-height: 20px;
  padding: 0 15px;
  transition:all .5s;
  cursor:pointer;
}
.nav li.on{
  color: #CE3A5C;
}
.nav li:hover{
  color: #CE3A5C;
}
.enterprise-list{
  margin-left: -8px;
  margin-right: -8px;
}
.enterprise-list .enterprise-li{
  width: 280px;
  height: 288px;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0px 3px 15px 3px rgba(43, 111, 141, 0.18);
  margin:12px;
}
.enterprise-list .enterprise-li .img{
  width: 100%;
  height: 172px;
  border-radius: 20px 20px 0 0;
  display: block;
}
.enterprise-list .enterprise-li .enterprise-li-title{
  padding:0 8px 0 12px;
  font-size: 18px;
  height: 56px;
  line-height: 28px;
  margin: 10px 0;
  color: #333333;
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2; 
}
.enterprise-list .enterprise-li .num{
  padding: 10px 0 0 12px;
  color: #999999;
  font-size: 16px;
}

.page{
    width: 610px;
    border-top: 2px solid #eeeeee;
    margin:60px auto 50px;
    padding: 12px 0;
    text-align: center;
}
.page .a{
    padding: 0 13px;
    margin: 0 4px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    color: #666;
    border: 1px solid #ccc;
    display: inline-block;
    border-radius: 4px;
}
.page .a.on{
    background: #BE475D;
    color: #fff;
}
.page input{
    width: 50px;
    height: 38px;
    box-sizing: border-box;
    border: 1px solid #E6E6E6;
    font-size: 14px;
    text-align: center;
}
</style>